<template>
    <div class="album-lists">
        <template v-for="(item, index) of opctions" >
            <li class="list" :key="index" v-if="item">
                <div class="poster">
                    <router-link :to="{ path: 'albumDetail', query: { id: item.albumid } }"><img :src="BASE_URL + item.picture" :onerror="errorImg" /></router-link>
                </div>
                <div class="content">
                    <p class="title" :title="item.name">
                        <router-link :to="{ path: 'albumDetail', query: { id: item.albumid } }">{{item.name}}</router-link>
                    </p>
                    <div class="creater">
                        <a @click="goToAppModel('space/resource',item.create_id,item.push_code)">
                            <img class="acatar-img" :src="BASE_URL + item.avatar_path" alt="头像" />
                            <span class="acatar-name">{{ item.createname }}</span>
                        </a>
                        <span class="count">{{ item.videocount }} 门课程</span>
                    </div>
                    <div class="keywords">
                        <template v-if="item.keyword === 'null'">
                            <span class="empty">暂无关键字</span>
                        </template>
                        <template v-else>
                            <el-tag size="mini" type='info' v-for="(word, inx) of changeType(item.keyword)" :key="inx">{{word}}</el-tag>
                        </template>
                    </div>
                </div>
            </li>
            <!-- 占位符合 -->
            <li :key="index" v-else class="list list-pleaceholder" ></li>
        </template>
    </div>
</template>
<script>
export default {
    props: {
        opctions: {
            require:true,
            type: Array,
            default() {
                return [];
            }
        },

    },
    data() {
        return {
			errorImg: 'this.src="' + require('../../../assets/images/image_loding.png') + '"'
        };
    },
    mounted() {
    },
    watch: {

    },

    methods: {
		changeType(val){
			return eval(val)
		}
    }
};
</script>
<style lang="scss">
.album-lists{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 10px;
	align-items: center;
	justify-items: center;
	.list{
		width: 290px;
		height: 250px;
		border-radius: 3px;
		background: #fff;
		transition: all .35s ease-in;
		&:hover {
			box-shadow: 0 6px 7px 0 rgba(0,0,0,0.10);
        }
	}
	.poster{
		height: 140px;
		overflow: hidden;
	}
	.content{
		box-sizing: border-box;
		padding: 8px 10px;
	}
	.title{
		line-height: 16px;
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;	
	}
	.creater{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0 14px;
		.acatar-img{
			width: 26px;
			height: 26px;
			border-radius: 50%;
		}
		.acatar-name{
			display: inline-block;
			width: 140px;
			line-height: 26px;
			margin-left: 5px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;			
		}
		.count{
			color: #666;
		}
	}
	.el-tag{
		margin-right: 5px;
	}
	.empty{
		color: #909399;
		line-height: 16px;
	}
	.list-pleaceholder{
		// background-color: #effaff;
	}
}
</style>
